<template>
  <Page :show-nav-bar="false" v-slot:default="{contentClass}" :style="'background-color: #c34b4b; background: url(' + bgHome + ') no-repeat; background-size: 100% auto;min-height:45.625rem;'"  class="box-border">
    <div :class="contentClass" style="padding-top: 0;">
      <div style="padding-top: 20rem;">
          <div class="box-border " style="width: 20.43rem; margin: 0 auto; padding-top: 1rem;">
<!--            <x-input v-model="item.name" label-width="5rem" label-style="color: #000;" label="姓&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名:" :classes="{'m-auto': true, 'rounded-lg': true}" :style="{'background-color': '#fff', 'padding': '.5rem', 'width': '19rem', 'border': '2px solid #88e4d7', 'font-size': '0.7875rem'}"></x-input>-->
<!--            <x-input v-model="item.mobile" label-width="5rem" label-style="color: #000;" label="联系方式:" :classes="{'m-auto': true, 'rounded-lg': true}" :style="{'background-color': '#fff','padding': '.5rem', 'width': '19rem', 'marginTop':'1rem', 'border': '2px solid #88e4d7', 'font-size': '0.7875rem'}"></x-input>-->
            <van-cell-group inset>
              <van-field
                  v-model="item.name"
                  required
                  name="姓名"
                  label="姓名"
                  placeholder="请输入姓名"
              />
            </van-cell-group>
            <div class="mt-5"></div>
            <van-cell-group inset>
              <van-field
                  v-model="item.mobile"
                  required
                  label="手机号"
                  placeholder="请输入手机号"
              />
              <van-field
                  v-model="item.vcode"
                  center
                  clearable
                  label="短信验证码"
                  placeholder="请输入短信验证码"
              >
                <template #button>
                  <van-button size="small" type="primary" :loading="sendLoading" @click="onSend">{{ sendLoading ? '发送中' : (timer ? '剩余' + downtime + '秒' : '发送验证码')}}</van-button>
                </template>
              </van-field>
            </van-cell-group>
          </div>
          <img :src="btnSubmit" class="m-auto mt-5 rounded-lg shadow-sm" style="width: 18.6rem; height: 2.5rem;" @click="onSubmit"/>
      </div>
    </div>
  </Page>
</template>

<script setup>
import bus from '../utils/bus'
import Selector from "../components/Selector.vue";
import Page from "../components/Page.vue";
import XInput from '../components/XInput.vue'
import {computed, nextTick, onActivated, onMounted, ref} from "vue";
import apis from '../apis'
import {useStore} from "vuex";
import {useRoute, useRouter} from "vue-router";
import { ImagePreview } from 'vant';
import bgHome from '../assets/images/bg-home.jpg'
import btnSubmit from '../assets/images/btn-submit.jpg'

const store = useStore()
const router = useRouter()
const route = useRoute()

const user = computed(() => store.state.user)

const selector = ref(null)

const selectorAppeal = ref(null)

const activity = ref(null)

const submited = ref(null)

const item = ref({
  name: null,
  mobile: null,
  vcode: null,
  form_id: null,
  channel: null,
  degree: null,
})

const columns = ref([])

const onHospitalClick = () => {
  selector.value.show()
}

const onAppealClick = () => {
  selectorAppeal.value.show()
}

const sendLoading = computed(() => {
  return store.state.loading.statuses['send_code']
})


let defaultItem = {
  name: '',
  mobile: '',
  vcode: null,
}

onMounted(async () => {
  item.value.form_id = route.query.form_id
  Object.assign(item.value, {
    channel: route.query.channel,
    degree: route.query.degree,
  })
  // item.value.hospital_id = route.query.hid

  await apis.activity.show({
    form_id: item.value.form_id
  }).then(({data: result}) => {
    activity.value = result.data
  })

  // if (activity.value.now > '2024-07-22 00:00:00') {
  //   router.push({name: 'draw_result', query: {form_id: route.query.form_id}})
  //   return
  // }

  await apis.activity.submitted({
    form_id: item.value.form_id
  }).then(({data: result}) => {
    submited.value = result.data
  })

  if (submited.value) {
    Object.assign(item.value, submited.value)
    if (!route.query.rewrite) {
      router.push({name: 'result', query: {form_id: route.query.form_id}}) // , hid: route.query.hid
      // window.location.href = 'http://localhost:3002/coupons/frame?id=1'
      // window.location.href = 'http://localhost:3000/mine/coupons'
      // window.location.href = 'http://member.yishidekeji.com/mine/coupons'
    }
  }

  await apis.hospital.list({}).then(({data: result}) => {
    columns.value = result.data.map((el) => {
      return {
        label: el.name,
        value: el.name
      }
    })
    console.log(columns.value)
  })

})



const timer = ref(0)
const downtime = ref(60)
const onSend = () => {
  if (!timer.value) {
    let start = () => {
      timer.value = setTimeout(() => {
        downtime.value = downtime.value - 1

        if (downtime.value > 0) {
          start()
        } else {
          timer.value = 0
          downtime.value = 60
        }
      }, 1000)
    }
    apis.sms.send({mobile: item.value.mobile}, {label: 'send_code'}).then(({data: result}) => {
      let data = result.data
      console.log(data)
      start()
    }).catch(() => {
      store.commit('loading/setFalse', 'send_code')
    })
  }
}


const onSubmit = () => {

  if (!item.value.name || item.value.name == null) {
    store.dispatch('message/showError', '请填写姓名!')
    return
  }

  if (!item.value.mobile || item.value.mobile == null) {
    store.dispatch('message/showError', '请填写联系方式!')
    return
  }

  if (!/^1\d{10}$/.test(item.value.mobile) && !/^(0\d{2,3})-?(\d{7,8})$/.test(item.value.mobile) ) {
    store.dispatch('message/showError', '联系方式错误!')
    return
  }

  if (!item.value.vcode || item.value.vcode == null) {
    store.dispatch('message/showError', '请填写验证码!')
    return
  }

  const data = JSON.parse(JSON.stringify(item.value))

  apis.activity[data.id?'update':'store'](data, {
    label: 'submit',
    show_loading: true
  }).then((res) => {
    console.log(res)
    submited.value = data
    // return apis.user_info.update({
    //   name: data.name,
    //   mobile: data.mobile,
    // }, {
    //   label: 'submit',
    //   show_loading: true
    // });
  }).then(() => {
    store.dispatch('message/showSuccess', '提交成功!')
    router.push({name: 'result', query: {form_id: route.query.form_id}})
    // window.location.href = 'http://localhost:3002/coupons/frame?id=1'
    // window.location.href = 'http://localhost:3000/mine/coupons'
    // window.location.href = 'http://member.yishidekeji.com/mine/coupons'
  })
}

</script>

<style scoped>

</style>